<template>
	<view>
		<view class="classes-view">
			<view @click="childrenShow = true" class="view">
				<text class="title">{{children.name || ''}}</text>
				<u-icon name="arrow-down-fill" size="16"></u-icon>
			</view>
		</view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color="appTheme.checkColor"></u-tabs>

		<view v-if="current === 0">
			<template v-for="(item, index) in nurseryList">
				<nursery-item :course="item"></nursery-item>
			</template>
			<u-empty class="noContent" v-if="nurseryList.length === 0" text="暂时没有内容哦～"  mode="list"></u-empty>
		</view>
		
<!-- 		<view v-if="current === 0 && category !== 1">
			<template v-for="(item, index) in todayList">
				<course-item :course="item" :category="category"></course-item>
			</template>
			<u-empty class="noContent" v-if="todayList.length === 0" text="暂时没有内容哦～"  mode="list"></u-empty>
		</view> -->
		<view v-else-if="current === 1">
			<template v-for="(item, index) in weekList">
				<nursery-item :course="item" :category="category"></nursery-item>
			</template>
			<u-empty class="noContent" v-if="weekList.length === 0" text="暂时没有内容哦～"  mode="list"></u-empty>
		</view>
		<view v-else-if="current === 2">
			<template v-for="(item, index) in nextWeekList">
				<nursery-item :course="item" :category="category"></nursery-item>
			</template>
			<u-empty class="noContent" v-if="nextWeekList.length === 0" text="暂时没有内容哦～"  mode="list"></u-empty>
		</view>
		
		<u-popup v-model="childrenShow" mode="bottom">
			<view class="u-select__header" >
				<view class="u-select__header__cancel u-select__header__btn"
					hover-class="u-hover-class" :hover-stay-time="150"  @click="childrenCancel">
					取消
				</view>
				<view class="u-select__header__title">
					选择学生
				</view>
				<view class="u-select__header__confirm u-select__header__btn"
					hover-class="u-hover-class"
					:hover-stay-time="150" @click="childrenConfirm">
					确定
				</view>
			</view>
			<scroll-view scroll-y="true" style="height: 500rpx;">
				<u-grid :col="3" :border="false">
					<u-grid-item v-for="(item,index) in childrenList" @click="itemClick(item, index)">
						<children-info-view :name="item.name" :gender="item.gender" :imgUrl="item.imgUrl"></children-info-view>
					</u-grid-item>
				</u-grid>
			</scroll-view>
		
		</u-popup>
	</view>
</template>

<script>
	
	import { getCoursePlanListByFamily, getNurseryScheduleByFamily, door2DoorChildren } from '../../api/course.js'
	import CourseItem from './components/course-item.vue'
	import NurseryItem from './components/nursery-item.vue'
	import { mapState } from 'vuex';
	import appMixin from '@/mixins/app.js'
	import ClassesView from '@/components/classes-view.vue'
	import ChildrenInfoView from '@/components/children-info-view.vue'
	export default {
		mixins: [appMixin],
		components: {
			CourseItem,
			ClassesView,
			NurseryItem,
			ChildrenInfoView
		},
		data() {
			return {
				list: [{
					name: '今日'
				}, {
					name: '本周'
				}, {
					name: '下周'
				}],
				current: 0,
				
				todayList: [],
				weekList: [],
				nextWeekList: [],
				nurseryList: [],
				
				classId: '',
				category: 1,
				
				children: {},
				childrenShow: false,
				childrenList: []
			}
		},
		computed: {
		},
		mounted() {
			this.getChildren()
			// this.classChange()
		},
		methods: {
			getChildren() {
				door2DoorChildren().then(res => {
					console.log(res)
					this.childrenList = res.data
					this.children = this.childrenList[0]
					this.classChange()
					
				})
			},
			classChange() {
				// this.getNursery();
				// console.log(res);
				// this.classId = res.id;
				// this.category = res.category;
				// if (this.category === 1) {
				// 	// 托班
				// 	this.getNursery();
				// } else {
				// 	this.getCourse('today');
				// }
				
				this.getNursery('today');
				this.getCourse('week');
				this.getCourse('nextweek');
			},
			
			change(index) {
				this.current = index;
			},

			getCourse(queryType) {
				console.log(this.classId)
				console.log(queryType);
				getCoursePlanListByFamily(this.children.id, queryType).then(res => {
					console.log(res);
					if (queryType === 'today') {
						this.todayList = res.data.content;
					} else if (queryType === 'week') {
						this.weekList = res.data.content;
					} else if (queryType === 'nextweek') {
						this.nextWeekList = res.data.content;
					}
				}).catch(error => {
					
				});
			},
			
			getNursery(queryType) {
				console.log('fdfdfdf')
				getNurseryScheduleByFamily(this.children.id, queryType).then(res => {
					console.log(res)
					// this.nurseryList = res.data.content
					if (queryType === 'today') {
						this.nurseryList = res.data.content;
					} else if (queryType === 'week') {
						this.weekList = res.data.content;
					} else if (queryType === 'nextweek') {
						this.nextWeekList = res.data.content;
					}
				})
			},
			
			itemClick(item, index){
				console.log('itemClick');
				this.children = item
				this.childrenCancel()
				this.classChange()
			},
			
			childrenConfirm() {
				console.log('childrenConfirm');
			},
			
			childrenCancel() {
				this.childrenShow = false;
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: $app-page-bg-color;
	}
	
	.classes-view{
		margin-left: 30rpx;
	}

	.course-item{
		margin: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	
	.u-select {
		
		&__header {
			display:flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			padding: 0 40rpx;
		}
	}
	
	.check-view{
		position: absolute;
		top: 20rpx;
		right: 10rpx;
	}
</style>
